<template>
  <div class="sentiments-comparison-card">
    <div class="card-header">
      <div class="card-title">Sentiments Comparison</div>
      <div class="legend-indicators">
        <div class="positive">Positive</div>
        <div class="neutral">Neutral</div>
        <div class="negative">Negative</div>
      </div>
    </div>
    <div class="sentiment-rate-container">
      <div class="chart-area"># of engagements</div>
      <!-- 图表区域（若包含图表） -->
      <div class="rate-meta">
        <div class="divider">- - - -</div>
        <!-- 分隔线（若“------”是视觉分隔） -->
        <div class="rate-label">Positive Rate</div>
        <!-- 比率标签 -->
      </div>
    </div>
    <div class="chart-container" ref="chartContainer">
      <PieChart :option="sentimentsChartOptions" :height="'2rem'"></PieChart>
    </div>
  
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";

export default {
  components: {
    PieChart,
  },
  data() {
    return {
      sentimentsChartOptions: {
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(255, 255, 255, 0.95)",
          borderColor: "#eee",
          borderWidth: 1,
          textStyle: {
            color: "#333",
            fontSize: 12,
          },
          padding: 10,
          extraCssText: "box-shadow: 0 2px 10px rgba(0,0,0,0.1);",
          formatter: function (params) {
            return `${params.seriesName}: ${params.value}k`;
          },
        },

        grid: {
          top: "5%",
          left: 8,
          right: "0%",
          bottom: "20%",
          containLabel: true,
        },

        legend: {
          orient: "horizontal",
          left: "center",
          bottom: "5%",
          icon: "roundRect",
          itemWidth: 30,
          itemHeight: 5,
          itemGap: 40,
          borderWidth: 0,
          padding: [0, 0, 0, 10],
          data: ["Positive", "Neutral", "Negative"],
          itemStyle: {
            borderRadius: 50,
          },
          textStyle: {
            color: "#6a6969",
            fontSize: 12,
            margin: 10,
            padding: [0, 5, 0, 5],
          },
        },
        xAxis: {
          boundaryGap: false,
          type: "category",
          data: [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "June",
            "July",
            "Aug",
            "Sept",
            "Oct",
            "Nov",
            "Dec",
          ],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#232323",
            fontSize: 10,
            fontWeight: 400,
            interval: 0,
            align: "center",
          },
        },
        yAxis: [
          {
            offset: 10,
            type: "value",
            axisLabel: {
              align: "right",
              margin: 20,
              color: "#232323",
              fontSize: 10,
              overflow: "truncate",
              fontWeight: 400,
            },
            // name: "# of engagements",
            nameGap: 30,
            nameTextStyle: {
              color: "#232323",
              fontSize: 12,
              fontWeight: 400,
              align: "right",
              verticalAlign: "middle",
              rotate: 270,
              padding: [0, 0, 0, 15],
            },
            min: 0,
            max: 100,
            interval: 25,
            position: "left",
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            name: "",
            nameGap: 20,
            min: 0,
            max: 100,
            offset: 30,
            interval: 25,
            position: "right",
            splitLine: {
              show: false,
            },
            axisLabel: {
              align: "right",
              color: "#030229",
              margin: 20,
              formatter: function (value) {
                return `${value}%`;
              },
            },
            nameTextStyle: {
              fontSize: 14,
              color: "#030229",
              fontWeight: 400,
              align: "right",
              verticalAlign: "middle",
              rotate: 90,
              padding: [0, -7, 0, 0],
            },
          },
        ],
        series: [
          {
            name: "Positive",
            stack: "sentiments",
            type: "bar",
            barWidth: 35,
            barGap: "10%",
            barCategoryGap: 500,
            data: [10, 22, 75, 58, 20, 22, 45, 38, 33, 8, 15, 8],
            itemStyle: {
              color: "#2FAA68",
              borderRadius: 4,
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          {
            name: "Neutral",
            stack: "sentiments",
            type: "bar",
            barWidth: 35,
            barGap: "10%",
            barCategoryGap: 500,
            data: [10, 22, 75, 58, 20, 22, 45, 38, 33, 8, 15, 8],
            itemStyle: {
              color: "#8F8F8F",
              borderRadius: 4,
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          {
            name: "Negative",
            stack: "sentiments",
            type: "bar",
            barWidth: 35,
            barGap: "10%",
            barCategoryGap: 500,
            data: [10, 22, 75, 58, 20, 22, 45, 38, 33, 8, 15, 8],
            itemStyle: {
              color: "#E51837",
              borderRadius: 4,
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          {
            name: "Positive Rate",
            type: "line",
            yAxisIndex: 1,
            data: [80, 72, 75, 58, 60, 45, 45, 69, 45, 66, 99, 89],
            symbol: "none",
            lineStyle: {
              type: "dashed",
              width: 2,
              color: "#f68d2b",
            },
            // 新增：扩展线的起始和结束点
            coordinateSystem: "cartesian2d",
            // 新增：在数据两端各添加一个点，使线延伸到边缘
            // data: [
            //   { value: 80, symbol: "none" },
            //   { value: 65, symbol: "none" },
            //   { value: 70, symbol: "none" },
            //   { value: 45, symbol: "none" },
            //   { value: 55, symbol: "none" },
            //   { value: 60, symbol: "none" },
            // ],
            // 关键：使用lineStyle.cap设置线的端点样式
            lineStyle: {
              type: "dashed",
              width: 2,
              color: "#f68d2b",
              cap: "round", // 端点圆角处理，使线更自然
            },
            // 确保线条渲染在最上层
            zlevel: 3,
          },
        ],
      },
    };
  },
};
</script>

<style scoped lang="scss">
.sentiments-comparison-card {
  position: relative;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid #cdcccc;

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .card-title {
      font-size: 18px;
      color: #454545;
      font-weight: 600;
    }

    .legend-indicators {
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: space-between;
      .positive {
        padding: 8px;
        background: #2faa68;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        border-radius: 8px;
        text-align: center;
        margin-right: 13px;
      }
      .neutral {
        padding: 8px;
        color: #8f8f8f;
        font-size: 12px;
        font-weight: 400;
        border: 1px solid #8f8f8f;
        border-radius: 8px;
        margin-right: 13px;
      }

      .negative {
        padding: 8px;
        color: #e51837;
        font-size: 12px;
        font-weight: 400;
        border: 1px solid #e51837;
        border-radius: 8px;
      }
    }
  }
  .sentiment-rate-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .chart-area {
      font-size: 10px;
      font-weight: 400;
      color: #454545;
    }
    .rate-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .divider {
        color: #f68d2b;
        margin-right: 5px;
      }
      .rate-label {
        font-size: 12px;
        font-weight: 400;
        color: #454545;
      }
    }
  }

  .chart-container {
    width: 100%;
    height: 100%;
  }

  .stats-table-container {
    position: absolute;
    left: 5%;
    bottom: 18%;
    width: 100%;
    box-sizing: border-box;
  }

  .stats-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border-spacing: 0;
  }

  .stat-label {
    font-size: 10px;
    font-weight: 400;
    color: #232323;
    text-align: left;
    width: 100px;
    text-align: left;
  }

  .stat-value {
    width: calc((100% - 100px) / 6);
    padding: 4px 8px;
    text-align: left;
    font-size: 10px;
    color: #6a6969;
  }

  .stats-table tr .stat-value {
    border-bottom: none;
  }

  td:first-child {
    width: 8%;
  }

  td:not(:first-child) {
    width: calc(92% / 6);
  }
}
</style>
